import { useState } from "react";

import "./index.scss";

import prevIcon from "./prev.png";
import nextIcon from "./next.png";

export default function ThreeDCarousel() {
  const [current, setCurrent] = useState<number>(3);

  const cardList = [1, 2, 3, 4, 5, 6, 7];

  return (
    <div className='threed-carousel'>
      <div className='tc-box'>
        {cardList.map(
          item =>
            item === current && (
              <div key={item} className='tcb-card tcb-card-active'>
                <img
                  src={prevIcon}
                  alt=''
                  onClick={() => current > 1 && setCurrent(x => x - 1)}
                  style={{ display: current > 1 ? "" : "none" }}
                />
                Card{item}
                <img
                  src={nextIcon}
                  alt=''
                  onClick={() =>
                    current < cardList.length && setCurrent(x => x + 1)
                  }
                  style={{ display: current < cardList.length ? "" : "none" }}
                />
              </div>
            )
        )}
      </div>
    </div>
  );
}
